<template>
  <div>
    <el-breadcrumb separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
          <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">
            {{ item.meta.i18nKey ? $t(item.meta.i18nKey) : item.meta.title }}
          </span>
          <a v-else @click.prevent="handleLink(item)">{{ item.meta.i18nKey ? $t(item.meta.i18nKey) : item.meta.title }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  const route = useRoute()
  const router = useRouter()

  let levelList = ref<any>([])
  /**
   * @Author { Paraboy }
   * @Method { getBreadcrumb }
   * @Describe { 获取面包屑导航数据 }
   * @Param {  }
   * @Return {  }
   */
  const getBreadcrumb = () => {
    let matched = route.matched.filter((item) => item.meta && item.meta.title) as any
    if (matched[1]) {
      matched[0].redirect = matched[0].children[0].path
    }
    levelList.value = matched.filter((item: any) => item.meta && item.meta.title)
  }
  /**
   * @Author { Paraboy }
   * @Method { handleLink }
   * @Describe { 跳转至二级菜单顶级行 }
   * @Param {  }
   * @Return {  }
   */
  const handleLink = (item: any) => {
    const { redirect } = item
    console.log(redirect)

    if (redirect) {
      router.push(redirect)
      return
    }
  }
  watch(
    route,
    (newData, oldData) => {
      getBreadcrumb()
    },
    { immediate: true, deep: true }
  )
  getBreadcrumb()
</script>

<style scoped></style>
